<template>
	<div class="exchange">
		<header class="border-b20 container">
			<div class="border-b pt20 pb20 layout">
				<h3 class="fs13 c333">订单号:{{ data.order_no }}</h3>
				<h3 class="fs13 c333">{{ data.created_at }}</h3>
			</div>
			<div class="pt20 pb20 layout-juscon" v-if="data">
				<img class="mr15 responsive-img img-bg" :src="data.goods_picture" alt="" style="width:100px;height:85px;">
				<div class="flex_1">
					<p class="fs16 black ellipsis" style="width: 12rem">{{ data.goods_name }}</p>
					<p class="c999 fs12 layout pt10 pb10">规格：{{ data.sku_name }} <span>数量:{{ data.num }}</span></p>
					<strong class="subject fs16"><i class="fs14">￥</i>{{ data.price }}</strong>
				</div>
			</div>
		</header>
		<section class='container pt15'>
			<span class="title fs14 border radius pt5 pb5 pl10 pr10">换货</span>
			<div class="sku-list" v-if="data.spec">
				<ul v-if="data.spec.length" style="max-height:15rem;overflow-y: scroll;">
					<li v-for="(items,n) in data.spec" :key="n" class="mt10">
						<h3 class="pt10 pb10 fs14 c333">{{ items.spec_name }}:</h3>
						<ul class="flex-left pb15">
							<li v-for="(item,index) in items.spec_data" class="border pt5 pb5 pl10 pr10 ml10 radius" :class="{ active : subIndex[n] == index }" :key="index" @click="selectCate(item,n,index)">{{ item.spec_value }}</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="pt15">
	  			<h3 class="fs14 c333 bold flex-center pb10">数量:</h3>	
				<van-stepper :disable-input='true' :step="1" :min="1" v-model="quantity"/>
			</div> 

			<div class="cause border mt25 pt5 pb10 pl10 pr10">
				<textarea name="" id="" rows="10" placeholder="请填写换货原因..." class="c999 full-width" v-model="reason"></textarea>
				<div class="flex">
					<span class="fs12 white bg-a9 radius pl10 pr10 mr10 h20 lh20" @click="upLoadImg">上传照片</span>
					<div class="mb15rem flex-left flex-w">
						<div v-for="(img,index) in img_array" class="evaluate-img border mr10">
							<img :src="img" class="responsive-img image-thumb">
							<button class="delete-img" @click="removeImg(index)">×</button>
						</div>	
						<input type="file" id="img" name='avatar' @change="uploadFile" class="hide filearea" value="">					
					</div>
				</div>	
			</div>
			<button class="white bg-subject radius full-width pt10 pb10 mt20 mb20 fs16" @click="submit">提交</button>
		</section>
	</div>
</template>

<script>
import { uploadAvatar } from "@/utils";
import { Stepper } from 'vant';
	export default{
		components:
		{
			Stepper
		},
		data()
		{
			return{
				reason 				: '',
				quantity 			: null,
				data   				: [],
				subIndex    		: [],
				selectArr_id		: [],
				selectArr 			: [],
				select_id 			: [],
				canselect			: [],
				sku_id 				: [],
				img_array           : [],
				order_item_id		: this.$route.query.id
			}
		},
		watch:
		{
			select_id(newVal)
			{
				this.canselect = this.data.sku.filter(res => res.select_id.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.sku_id = '';
				}
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/order/getAfter', { params : { order_item_id : this.order_item_id }}).then(res => { 
					this.data = res.data;
					this.quantity = res.data.num;
				})
			},
			submit()
			{
				let params = {
					order_item_id 			: this.order_item_id,
					sku_id   	 			: this.sku_id.lenght ? this.sku_id : 0,
					buyer_reason 			: this.reason,
					buyer_reason_img 		: this.img_array,
					num						: this.quantity
				}
				
				this.$http.post('/exchange/addExchange',params).then( res=> {

				})
			},
			// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value) 
				{
	                this.selectArr_id[n] = item.spec_value_id;
	                this.selectArr[n] = item.spec_value;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.select_id = this.selectArr_id.reverse().join('_')
				// this.selectString = this.selectArr.join(' '); 
			},
			removeImg()
			{

			},
			upLoadImg()
			{
				document.getElementById("img").click();	
			},	
			uploadFile()
			{
				uploadAvatar("img", res => {
					console.log(res)
					this.$http.post('/user/uploadImg',{ img : res }).then(res => {
						this.img_array.push(res);
					})
				});
			}
		}
	}
</script>

<style lang="less">
	.exchange{
		.title{
			color:#ff7b1a;
			border-color:#ff7b1a;
		}
		.active
		{
			border-color: #ea2000;
			color:#ea2000;
		}
		.delete-img{
			display: inline-block;
		    position: absolute;
		    width: 20px;
		    height: 20px;
		    background-color: #ccc;
		    border-radius: 100%;
		    color: #eee;
		    right: -1rem;
		    top: -1rem;
		}
	}
</style>
